<template>
    <div class="login">
        <div class="login-bg"></div> 
        <div class="login-wrap" @keyup.enter="goHome">
            <div class="loginIn">
                <el-input class="inp" autofocus :prefix-icon="User" placeholder="请输入账号" clearable v-model="loginData.userName"></el-input>
                <br/>
                <el-input class="inp" show-password :prefix-icon="Lock" placeholder="请输入密码" clearable v-model="loginData.passWord"></el-input>
            </div>
            <el-button class="btn" color="#9c3939" @click="goHome">SKIP</el-button>   
        </div>
    </div>
</template>

<script lang='ts'>
import {useRouter} from 'vue-router'
import { defineComponent, reactive, ref } from 'vue'
import { User,Lock} from '@element-plus/icons-vue'
export default defineComponent({
    name: 'loginView',
    setup() {
        const router = useRouter()
        const loginData = reactive({
            userName:'admin',
            passWord:'000'
        })
        const goHome = ()=>{
            router.push('/home')
        }
        return {
            goHome,
            loginData,
            User,Lock
        }
    }
})
</script>

<style scoped>
.login{
    position: relative;
    height: 100%;
    overflow: hidden;
}
.login-bg{
    background: url('../assets/home.jpg') no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-size: 100% 100%;
}
.login-bg:after{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.7;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.login-wrap{
    width: 25%;
    min-height: 30%;
    padding: 3% 5% 3%;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 10% auto;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 9%;
    text-align: center;
    background-size: 100% 100%;
}
.loginIn{
    width: 100%;
    margin: 6% 0 0;
    height: 100%;
}
.inp{
    width: 70%;
    margin: 4% 0;
    border: 0;
    font-size: 12px;
}
.btn{
    width: 70%;
    margin: 3% 0;
    font-size: 12px;
}
</style>